@use "../core/color";
@use "../core/layout";
@use "../core/typography";

// Navigation bar displayed at the top of the page
// -----------------------------------------------
// Specs: https://trello.com/c/atjT8T9p

.nav-bar {
  position: relative;

  border-bottom: 1px solid color.$grey-3;
  padding-top: 10px;
  padding-bottom: 10px;
}

// Nav bar content which lays out nav bar items, except for the search input
// on small screens
.nav-bar__content {
  display: flex;
  flex-direction: row;

  padding-left: layout.$content-padding-left;
  padding-right: layout.$content-padding-right;

  max-width: layout.$content-max-width;
  margin-left: auto;
  margin-right: auto;
}

.nav-bar__logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-bar__logo {
  margin-right: 30px;
  color: color.$grey-6;
}

.nav-bar__search {
  flex-grow: 2;
  max-width: 650px;
}

.nav-bar__search-hidden-input {
  // Don't display this input to the user.
  // We use visibility: hidden; instead of display: none; because
  // display: none; causes iOS Safari to ignore the <input> and not use it for
  // form submission.
  // See https://bugs.webkit.org/show_bug.cgi?id=64733
  visibility: hidden;

  // Prevent the hidden input from affecting the layout of the visible parts.
  position: absolute;
}

.nav-bar-links {
  margin-left: 10px;

  display: flex;
  flex-direction: row;
  align-items: center;
}

// Containers for links and dropdown menus displayed on the right-hand side of
// the nav bar
.nav-bar-links__item {
  height: 18px;
  margin-left: 10px;
  margin-right: 10px;
}

// Link text for links on the right-side of the nav bar
.nav-bar-links__link {
  display: flex;
  flex-direction: row;
  align-items: center;

  @include typography.font-normal;
  color: color.$grey-5;
}

// Dropdown arrow indicator shown to the right of the 'Groups' and 'Settings'
// menus
.nav-bar-links__dropdown-arrow {
  display: inline-block;
  margin-left: 5px;

  @include typography.font-small;
  color: color.$grey-4;
}

.nav-bar-links__item:first-child {
  margin-left: 0;
}

.nav-bar-links__item:last-child {
  margin-right: 0;
}

@media screen and (max-width: layout.$tablet-width) {
  // Reduce horizontal margins on smaller screens to provide more space for
  // search bar
  .nav-bar__content {
    padding-left: layout.$content-padding-left-on-small-screens;
    padding-right: layout.$content-padding-right-on-small-screens;
  }
}

@media screen and (max-width: layout.$max-phone-width) {

  // In order to make the search bar flow below the other
  // two sections of the nav, we need to change the flow order
  // and utilize the flex-wrap to allow the search to push
  // into the next row
  .nav-bar__content {
    flex-wrap: wrap;
  }
  
  .nav-bar__search {
    order: 3; // swaping into links original position
    width:100%;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .nav-bar-links {
    order: 2; // swaping into search's original position
  }
}
